<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模板</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel，用于将jsx转换成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
      //1.创建组件
      class Weather extends React.Component {
        constructor(props) {
          console.log("constructor");
          super(props);
          this.state = {
            isLucy: false,
            chance: "斯阔达",
          };
          //解决changeWeather中this指向问题
          this.demo = this.changeWeather.bind(this);
        }

        /**
         *  render执行几次， 1+n次，第一次是初始化，n是状态更新次数
         */
        render() {
          console.log("renderaaa");
          return (
            <h1 onClick={this.demo}>
              {this.state.isLucy
                ? "入职两天，倒霉两天...."
                : "啊啊啊啊啊啊啊啊啊啊啊"}
              ，{this.state.chance}
            </h1>
          );
        }

        /*
            changeWeather放在那里？ Weather原型对象上，供实例使用
            由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
            类中的方法默认开启局部的严格模式，所以changeWeather中的this为undefined
        */
        changeWeather() {
          const isLucy = this.state.isLucy;
          //注意：状态必须通过setState修改
          this.setState({
            isLucy: !isLucy,
          });
        }
      }
      //2.渲染组件到页面上
      ReactDOM.render(<Weather />, document.querySelector("#test"));
    </script>
  </body>
</html>
